<template>
<div class="new">
    <common-banner></common-banner>
    <div class="contain">
        <h1>{{newTitle}}</h1>
        <i>{{this.newData.time}}</i>
        <!-- 正文 -->
        <div class="new-text" v-html="newHtml"></div>

        <div class="return">
            <ButtonGroup>
                <Button type="primary" to="/newList">
                    <Icon type="ios-arrow-back" />
                    {{$t('back')}}
                </Button>
            </ButtonGroup>
        </div>
    </div>
</div>  
</template>

<script>
import CommonBanner from "@/views/common/Banner";
import ApiPath from "@/api/ApiPath";

export default {
  name: 'New',
  components: {
    CommonBanner
  },
  data () {
    return {
        newData: "",
        id: ""
    }
  },
  created() {
    this.$store.state.isNavShow = true;
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$emit("setNav", to.meta.index);
    });
  },
  methods:{
    getNewInfo(){
        this.id = this.$route.query.id;;
        this.$axios.get(ApiPath.getNew + this.id)
        .then(this.getNewInfoSucc);
    },
    getNewInfoSucc(res){
        res = res.data;
        if(res){
            this.newData = res.newData
        }
        console.log("[New] NewInfo:" + JSON.stringify(res))

    }
  },
  mounted(){
      this.getNewInfo();
  },
  computed: {
      newHtml: function(){
          return this.$i18n.locale == "zh" ? this.newData.contantZh : this.newData.contantEn;
      },
      newTitle: function(){
          return this.$i18n.locale == "zh" ? this.newData.titleZh : this.newData.titleEn;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">
.new-text{
    padding: .5rem 0;
    border-top: 1px solid #ebebeb;
    a{
        color:#fff
    }
}
</style>
